import { ProFormUploadButton } from '@ant-design/pro-components'
import { useState } from 'react'

interface UploadBtnProps {
  name: string
  value?: string
  onChange?: (value: string) => void
  [key: string]: any
}

const UploadBtn = ({ value, onChange, ...props }: UploadBtnProps) => {
  const [fileList, setFileList] = useState<any[]>(value ? [{ url: value, uid: '-1', name: 'image' }] : [])
  return (
    <ProFormUploadButton
      max={1}
      value={[{ url: value, uid: '-1', name: 'image' }]}
      action={`http://localhost:3366/admin/tools/upload`}
      fieldProps={{
        name: 'file',
        multiple: false,
      }}
      fileList={fileList}
      onChange={(info) => {
        setFileList(info.fileList)
        const { status, response } = info.file;
        if (status === 'done') {
          onChange?.(response.data)
        }
      }}
      {...props}
    />
  )
}

export default UploadBtn